/************************************************************************
Page Essentials
************************************************************************/


body {
	background: url(../img/freeze.jpg) no-repeat;
	font-family: helvetica;
}

.content {
	margin: 200px auto;
	width: 510px;
}


::-webkit-input-placeholder {
   color: rgba(255,255,255,.5);
}

:-moz-placeholder {  
   color: rgba(255,255,255,.5) !important;  
}


textarea, input { outline: none; }


/************************************************************************
Login Form Container
************************************************************************/

.linear-form {
	position: relative;
	padding: 16px;
	width: 510px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(122,255,255,.2); /* drop shadow, outer glow and inner shadow */
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(2,255,255,.2); /* drop shadow, outer glow and inner shadow */
	box-shadow: 0 2px 3px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(2,255,255,.2); /* drop shadow, outer glow and inner shadow */
	background-image: url(); /* gradient overlay */
	background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 100%); /* gradient overlay */
	background-image: -o-linear-gradient(bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 100%); /* gradient overlay */
	background-image: linear-gradient(bottom, rgba(0,0,0,.15) 0%, rgba(0,0,0,.1) 100%); /* gradient overlay */
}



/************************************************************************
Login Form Input Fields
************************************************************************/

input {
	display: inline;
}

.linear-form form input {
	position: relative;
	color: #000;
	font-size: 14px;
	padding: 0 15px;
	width: 200px;
	height: 40px;
	border: 1px solid rgba(0,0,0,.7); /* stroke */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: rgba(0,0,0,.35); /* layer fill content */
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1); /* drop shadow, inner shadow and inner glow */
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1); /* drop shadow, inner shadow and inner glow */
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1); /* drop shadow, inner shadow and inner glow */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.linear-form form input:focus {
	border: 1px solid rgba(0,0,0,.3); /* stroke */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: rgba(255,255,255,.3); /* layer fill content */
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1); /* drop shadow, inner shadow and inner glow */
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1); /* drop shadow, inner shadow and inner glow */
	box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 1px 3px rgba(0,0,0,.2), inset 0 0 5px rgba(0,0,0,.1); /* drop shadow, inner shadow and inner glow */
	background-image: url(); /* gradient overlay */
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%); /* gradient overlay */
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%); /* gradient overlay */
	background-image: linear-gradient(bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 100%); /* gradient overlay */
}

.username, .password {
	display: inline-block;
	margin: 0 10px 0 0;
}


/************************************************************************
Login Form Button
************************************************************************/

.linear-form form button {	
	cursor: pointer;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	width: 78px;
	height: 42px;
	border: 1px solid rgba(23,23,23,.5); /* stroke */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: rgba(51,131,222,.5); /* layer fill content */
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.4); /* drop shadow and inner shadow */
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.4); /* drop shadow and inner shadow */
	box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.4); /* drop shadow and inner shadow */
	background-image: url(); /* gradient overlay */
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
	background-image: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
}


.linear-form form button:hover {
	border: 1px solid rgba(23,23,23,.5); /* stroke */
	background-color: rgba(34,111,198,.5); /* layer fill content */
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.4); /* drop shadow and inner shadow */
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.4); /* drop shadow and inner shadow */
	box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.4); /* drop shadow and inner shadow */
	background-image: url(); /* gradient overlay */
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
	background-image: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
}



.linear-form form button:active {
	border: 1px solid rgba(23,23,23,.5); /* stroke */
background-color: rgba(16,75,142,.5); /* layer fill content */
background-image: url(); /* gradient overlay */
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
background-image: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.2) 100%); /* gradient overlay */
}



/************************************************************************
Tooltip
************************************************************************/

.tooltip {	
	text-shadow: -1px -1px rgba(0, 0, 0, 0.5);
	position: absolute;
	top: -24px;
	font-size: 14px;
	color: #fff;
	width: 200px;
	padding: 8px;
	text-align: center;
	border: 1px solid #8f2623; /* stroke */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* border radius */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /* prevents bg color from leaking outside the border */
	background-color: rgba(198,48,48,.85); /* layer fill content */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.15); /* drop shadow, outer glow and inner shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.15); /* drop shadow, outer glow and inner shadow */
	box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.1), inset 0 0 0 1px rgba(255,255,255,.15); /* drop shadow, outer glow and inner shadow */
	background-image: url(); /* gradient overlay */
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 57.01%, rgba(255,255,255,.15) 100%); /* gradient overlay */
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 57.01%, rgba(255,255,255,.15) 100%); /* gradient overlay */
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 57.01%, rgba(255,255,255,.15) 100%); /* gradient overlay */
	background-image: linear-gradient(bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 57.01%, rgba(255,255,255,.15) 100%); /* gradient overlay */

	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */

}

.tooltip:before {
 	border:solid;
    border-color: #87221f transparent;
    border-width:8px 8px 0 8px;
    content:"";
    display:block;
    left:92px;
    position:absolute;
    z-index:98;
    bottom: -8px;	
}

.tooltip:after {
 	border:solid;
    border-color: #c84840 transparent;
    border-width:8px 8px 0 8px;
    content:"";
    display:block;
    left:92px;
    position:absolute;
    z-index:98;
    bottom: -7px;
}